<template>
  <div class="daka">
    <div class="box">
      <div class="cover">
        <img class="img" v-lazy="cover+coverSize" />
      </div>
      <div class="content">
        <div class="title">{{ title }}</div>
        <p class="desc">{{ desc }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PostDaka',
  props: {
    id: {
      type: [Number, String]
    },
    title: {
      type: String
    },
    desc: {
      type: String
    },
    cover: {
      type: String
    },
    coverSize: {
      type: String,
      default: '@128w_124h'
    }
  }
}
</script>

<style lang="scss" scoped>
  .daka{
    padding: {
      left: rem(10px);
      right: rem(10px);
    }
    margin-bottom: rem(10px);
    .box {
      @include border1px(#e7e7e7, 1px, rem(4px));
      background-color: $color-white;
      display: flex;
      flex: 0 0 rem(64px);
      height: rem(64px);
      margin-top: rem(8px);
    }
    .cover{
      @include cover(128, 124);
      width: rem(64px);
      height: 100%;
      background: {
        color: $color-grey;
        size: 36%;
        image: url('~@/assets/placeholder.png');
        repeat: no-repeat;
        position: 50%;
      }
    }
    .content{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1 1;
      overflow: hidden;
      padding: rem(10px);
    }
    .title{
      font-size: rem(15px);
      @include max-lines(1);
    }
    .desc{
      color: $color-text-secondary;
      font-size: rem(12px);
      margin: 0;
      @include max-lines(1);
    }
  }
</style>
